import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
import React, { lazy, Suspense } from "react";
import ScreenLayout from "./ScreenLayout";
import styled from "styled-components";
import Header from "./earth/components/Header";
import Login from "./login/Login";
// import { Button, message, Space } from "antd";
import NotFound from "./ceshi/notFound";

// 懒加载组件
const StockWarningPage = lazy(() => import("./stock/SupermarketAlarmPanel"));
const StoreMapPage = lazy(() => import("./map/StoreMapPage"));
const SalesDataPage = lazy(() => import("./store/CityStores"));
const Filtera = lazy(() => import("./filter/Filtera"));
const Trendqushi = lazy(() => import("./trend/Trendqushi"));
// const Login = lazy(() => import("./login/Login"));
const Earth = lazy(() => import("./earth/components/Earth"));
const InfoPanel = lazy(() => import("./earth/components/InfoPanel"));
const DataPanel = lazy(() => import("./earth/components/DataPanel"));
// const CityStores = lazy(() => import("./earth/components/CityStores"));

const AppContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100vh;
  /* background: #000; */
`;

const MainContent = styled.div`
  flex: 1;
  display: flex;
  position: relative;
`;
// 创建一个包装组件来显示地球页面的完整布局
const EarthPage = () => (
  <>
    <InfoPanel position="left" />
    <Earth />
    <InfoPanel position="right" />
    <DataPanel />
  </>
);


// 定义受保护路由组件
const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
  const isLoggedIn = localStorage.getItem("username");
  if (!isLoggedIn) {
    // alert("请先登录");
    return <Navigate to="/login" replace />;
  }
  return (
    <Suspense fallback={<div>Loading...</div>}>
      {children}
      {/* <Navigate to="/sales" /> */}
    </Suspense>
  );
};

function App() {
  return (
    <BrowserRouter>
      <ScreenLayout>
        <AppContainer>
          <Header />
          <Routes>
            <Route path="/login" element={<Login />} />
            <Route path="/" element={<Navigate to="/sales"  />} />
            <Route
              path="/filter"
              element={
                <ProtectedRoute>
                  <Filtera />
                </ProtectedRoute>
              }
            />
            <Route
              path="/sales"
              element={
                <ProtectedRoute>
                  <SalesDataPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/stock"
              element={
                <ProtectedRoute>
                  <StockWarningPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/map"
              element={
                <ProtectedRoute>
                  <StoreMapPage />
                </ProtectedRoute>
              }
            />
            <Route
              path="/earth"
              element={
                <ProtectedRoute>
                  <MainContent>
                    <EarthPage />
                  </MainContent>
                </ProtectedRoute>
              }
            />
            {/* <Route
              path="/city-stores"
              element={
                <ProtectedRoute>
                  <CityStores />
                </ProtectedRoute>
              }
            /> */}
            <Route
              path="/trend"
              element={
                <ProtectedRoute>
                  <MainContent>
                    <Trendqushi />
                  </MainContent>
                </ProtectedRoute>
              }
            />
            <Route path="*" element={<NotFound />} />
          </Routes>
        </AppContainer>
      </ScreenLayout>
    </BrowserRouter>
  );
}

export default App;

{
  /* <Routes>
          <Route path="/filter" element={<Filtera />} />
          <Route path="/" element={<SalesDataPage />} />
          <Route path="/stock" element={<StockWarningPage />} />
          <Route path="/map" element={<StoreMapPage />} />
        </Routes> */
}
